<style lang="scss">
.login {
  height: 100%;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
}
</style>
<template>
  <div class="login" @keyup.enter="submitLogin">
    <div class="login_content">
      <div>阜宁县农业农村数据资源建设项目</div>
      <div>
        <div>
          <el-input v-model="userObj.nickname" type="text" placeholder="请输入用户名"><i slot="prefix" class="el-input__icon el-icon-user-solid"></i></el-input>
        </div>
      </div>
      <div>
        <div>
          <el-input v-model="userObj.passwd" type="password" placeholder="请输入密码" show-password
            ><i slot="prefix" class="el-input__icon el-icon-lock"></i
          ></el-input>
        </div>
      </div>
      <div style="width: 250px">
        <div>
          <el-input v-model="code" placeholder="请输入验证码"> <i slot="prefix" class="el-input__icon el-icon-setting"></i></el-input>
        </div>
        <div @click="getDiffCode()" class="codeClass">
          <label :class="'label' + codePosition[0]">{{ currentCode[0] }}</label>
          <label :class="'label' + codePosition[1]">{{ currentCode[1] }}</label>
          <label :class="'label' + codePosition[2]">{{ currentCode[2] }}</label>
          <label :class="'label' + codePosition[3]">{{ currentCode[3] }}</label>
        </div>
      </div>
      <el-button type="primary" @click="submitLogin">登录</el-button>
    </div>
  </div>
</template>

<script>
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
import userApi from './../../api/user';
export default {
  name: 'login',
  data() {
    return {
      userObj: {
        nickname: '',
        passwd: '',
        authPlat: 'PC',
      },
      codePosition: [],
      currentCode: [],
      codeArr: [
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        'Q',
        'W',
        'E',
        'R',
        'T',
        'Y',
        'U',
        'P',
        'A',
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        'S',
        'D',
        'F',
        'G',
        'H',
        'J',
        'K',
        'L',
        'Z',
        'X',
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        'C',
        'V',
        'B',
        'N',
        'M',
      ],
      code: '',
    };
  },
  methods: {
    submitLogin() {
      var vm = this;
      if (vm.code.toLocaleUpperCase() != vm.currentCode.join('')) {
        vm.$message({
          type: 'error',
          message: '验证码错误，请重新输入',
        });
        vm.getDiffCode();
        return false;
      }
      const passwd = vm.$md5(this.userObj.passwd);
      console.log(userApi);
      userApi.login(this.userObj.nickname, passwd).then((res) => {
        if (res.data.isSuccess) {
          localStorage.setItem(user, res.data.data);
          localStorage.setItem(token, res.data.tokenInfo);
          this.$router.push('/');
        }
      });
    },
    jumpMain(res, flag = false) {},
    getFirstMenu() {},
    getDiffCode() {
      var vm = this;
      var arr = [];
      let codePosition = [];
      for (let i = 0; i < 4; i++) {
        var index = Math.floor(Math.random() * vm.codeArr.length);
        arr.push(String(this.codeArr[index]));
        codePosition.push(Math.floor(Math.random() * 4));
      }
      vm.codePosition = codePosition;
      this.currentCode = arr;
    },
  },
  mounted() {
    var vm = this;
    vm.getDiffCode();
  },
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  background-image: url(./images/loginBg.png);
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .login_content {
    width: 400px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border-radius: 6px;
    background: #fff;
    padding: 25px 25px 25px 25px;
    > div {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      margin-bottom: 26px !important;
      position: relative;
      > span {
        width: 60px;
        text-align: left;
        font-size: 14px;
        color: #000000;
      }
      > div {
        flex: 1;
        height: 100%;
      }
    }
    > div:nth-child(1) {
      justify-content: center;
      font-size: 18px;
      color: #707070;
      font-weight: bold;
    }
    .el-button {
      padding: unset;
      height: 40px;
      line-height: 40px;
    }
  }
}
.codeClass {
  width: 80px;
  flex: unset !important;
  height: 100%;
  text-align: center;
  background-color: #696c71;
  color: #fff;
  letter-spacing: 3px;
  padding: 0 6px;
  font-size: 20px;
  margin-left: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-around;
  label {
    cursor: pointer;
    font-weight: bold;
  }
  .label0 {
    margin-top: 3px;
    transform: rotate(45deg);
    background: -webkit-linear-gradient(90deg, #0c6efc, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .label1 {
    margin-top: 5px;
    transform: rotate(30deg);
    background: -webkit-linear-gradient(90deg, #fcd00c, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .label2 {
    margin-top: 13px;
    transform: rotate(15deg);
    background: -webkit-linear-gradient(90deg, #fc0c34, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .label3 {
    margin-top: unset;
    background: -webkit-linear-gradient(90deg, #0cfc34, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
</style>
